<!--
 * @Descripttion: 系统计划任务配置
 * @version: 1.2
 * @Author: sakuya
 * @Date: 2021年7月7日09:28:32
 * @LastEditors: sakuya
 * @LastEditTime: 2021年7月10日20:56:47
-->
<template>
  <el-main>
    <el-row>
      <el-col :xl="6" :lg="6" :md="8" :sm="12" :xs="12" v-for="item in list" :key="item.id">
        <el-card class="task task-item" shadow="hover">
          <template #header>
            <div class="handler">
              <el-tooltip placement="top">
                <template #content> 进入对话 </template>
                <el-button type="primary" icon="el-icon-chat-dot-round" @click="openChat(item)" circle></el-button>
              </el-tooltip>

              <el-dropdown trigger="click">
                <el-button type="primary" icon="el-icon-more" circle plain></el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="edit(item)">编辑</el-dropdown-item>

                    <el-dropdown-item @click="del(item)" divided>删除</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </template>

          <h2>{{ item.name }}</h2>
          <ul>
            <li>
              <h4>类型: {{ item.chatType }}</h4>
            </li>
            <li>
              <h4>模型: {{ item.chatModel }}</h4>
            </li>
          </ul>
          <!-- <div class="header"></div> -->
        </el-card>
      </el-col>
      <el-col :xl="6" :lg="6" :md="8" :sm="12" :xs="24">
        <el-card class="task task-add task-item" shadow="never" @click="add">
          <el-icon><el-icon-plus /></el-icon>
          <p>添加应用</p>
        </el-card>
      </el-col>
    </el-row>
  </el-main>

  <save-dialog id="saveDialog" v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false"></save-dialog>
  <update-save-dialog
    id="updateSaveDialog"
    v-if="dialog.updateSave"
    ref="updateSaveDialog"
    @success="handleSuccess"
    @closed="dialog.updateSave = false"
  ></update-save-dialog>
</template>

<script>
import saveDialog from './save';
import updateSaveDialog from './updateSave';

export default {
  name: 'AIApplicationManage',
  components: {
    saveDialog,
    updateSaveDialog,
  },
  provide() {
    return {
      list: this.list,
    };
  },
  data() {
    return {
      dialog: {
        save: false,
        logsVisible: false,
        updateSave: false,
      },
      list: [],
    };
  },
  async mounted() {
    await this.getList();
  },
  methods: {
    openChat(row) {
      // 打开对话
      this.$router.push({
        path: '/ai/chat',
        query: {
          id: row.id,
          navTitle: row.name,
        },
      });
    },
    add() {
      this.dialog.save = true;
      this.$nextTick(() => {
        this.$refs.saveDialog.open();
      });
    },
    edit(task) {
      this.dialog.updateSave = true;
      this.$nextTick(() => {
        this.$refs.updateSaveDialog.open('edit').setData(task);
      });
    },
    del(task) {
      this.$confirm(`确认删除 ${task.name} 应用吗？`, '提示', {
        type: 'warning',
        confirmButtonText: '删除',
        confirmButtonClass: 'el-button--danger',
      })
        .then(async () => {
          var res = await this.$API.aiApplication.remove.post(task.id);
          if (res.code == 200) {
            this.list.splice(
              this.list.findIndex(item => item.id === task.id),
              1
            );
          }
        })
        .catch(() => {
          //取消
        });
    },
    //本地更新数据
    handleSuccess() {
      this.getList();
    },
    async getList() {
      var res = await this.$API.aiApplication.page.get({
        page: 1,
        pageSize: 100000,
      });
      this.list = res.data.rows;
    },
  },
};
</script>

<style scoped>
.task {
  height: 150px;
}
.task-item {
  margin: 5px;
}
.task-item h2 {
  font-size: 15px;
  color: #3c4a54;
  padding-bottom: 15px;
}
.task-item li {
  list-style-type: none;
  margin-bottom: 10px;
}
.task-item li h4 {
  font-size: 12px;
  font-weight: normal;
  color: #999;
}
.task-item li p {
  margin-top: 5px;
}
.task-item .bottom {
  border-top: 1px solid #ebeef5;
  text-align: right;
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.task-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  color: #999;
}
.task-add:hover {
  color: #409eff;
}
.task-add i {
  font-size: 30px;
}
.task-add p {
  font-size: 12px;
  margin-top: 20px;
}

.dark .task-item .bottom {
  border-color: var(--el-border-color-light);
}
.handler {
  float: right;
}
</style>
